<template>
  <view class="w100p pr common_wrap">
    <CommonHeader :title="$t('我参与的采购')" color="#fff" backgroundColor="rgba(0,0,0,1)" :is-right="false"></CommonHeader>

    <view class="w100p flex-item oh">
      <scroll-view scroll-y class="w100p scroll-Y">
        <view class="w100p swiper_video" :style="{ top: +statusBarHeight + 44 + 'px' }">
          <swiper class="w100p swiper" circular :indicator-dots="true" indicator-color="#9B969A"
            indicator-active-color="#fff" :circular="true">
            <swiper-item v-if="!!currentVideo">
              <view class="pr video_wrap">
                <video id="myVideo" class="w100p  palyxxx" :src="currentVideo" :show-center-play-btn="true"
                  object-fit="cover" play-btn-position="center" :controls="true" :autoplay="isAdroid ? true : false" muted
                  :poster="getImageUrl(currntMainPic)">
                </video>
                <view class="video-wrapxx">
											<image  class="w100p" :src="get(faQuotation, 'purchaseInfo.productImgUrls') ?get(faQuotation, 'purchaseInfo.productImgUrls').split(',')[0] : ''" mode="aspectFill" v-if="get(faQuotation, 'purchaseInfo.productImgUrls')"></image>
								</view>
                <cover-view v-show="isShow" class="pa play_wrap" @click="playsHeader(currentVideo,'first_video')">
                  <view class="icon_wrap">
                    <u-icon name="play-right-fill" color="#fff" size="46"></u-icon>
                  </view>
                </cover-view>
              </view>
            </swiper-item>
            <swiper-item v-for="(item, index) in get(faQuotation, 'purchaseInfo.productImgUrls') ? get(faQuotation, 'purchaseInfo.productImgUrls').split(',') : []" :key="index">
              <image class="w100p" :src="item" mode="aspectFill" @click="amplifyImg(item)"></image>
            </swiper-item>
          </swiper>
          <cover-view v-show="isShow" class="pa history_wrap">
            <u-notice-bar class="w100p" mode="vertical" :is-circular="false" :volume-icon="false" type="none"
              :list="historyList" font-size="22" duration="5000"></u-notice-bar>
          </cover-view>
        </view>
		<!-- <view class="h-100"></view> -->
        <view :style="{ marginTop: getTopR() }"></view>
        <view class="common_content pr w100p">
          <view class="w100p shop_card ">
            <view class="price-wrppx">{{$t('采购')}}</view>
            <view class="w100p flex-column card_wrap">
              <view class="namex">
                {{ get(faQuotation, `purchaseInfo.${plangJava('productName')}`) }}
              </view>
            </view>
          </view>
          <cover-view class="pa swiper_wrap"></cover-view>
        </view>
        <!-- 采购 -->
        <view class="wrapper-info pr">
          <!-- 基础信息 -->
          <view :class="langR == 'ru'?'r_base-info base-info':'base-info'" @click="goPerson">
            <view class="left-avatar">
              <view class="avatar-w">
                <view class="avatar">
                  <image :src="getImageUrl(faQuotation.avatar)" mode="aspectFill"></image>
                </view>
                <view class="country">
					        <flag :country="faQuotation.country"></flag>
                  <!-- <image src="/static/caigou/ru.png" mode="aspectFill"></image> -->
                </view>
              </view>
              <view class="desc-avatar">
                <view class="name ellipsis_one">{{faQuotation[plangJava('username')]}}</view>
                <view class="vip-leval">
                  <view class="circle">
                    <image v-if="faQuotation.vipLevel == 0" src="@/static/detail/vip_1.png" mode="scaleToFill" />
                    <image v-if="faQuotation.vipLevel == 1" src="@/static/detail/vip_2.png" mode="scaleToFill" />
                    <image v-if="faQuotation.vipLevel == 2" src="@/static/detail/vip_3.png" mode="scaleToFill" />
                    <image v-if="faQuotation.vipLevel == 3" src="@/static/detail/vip_4.png" mode="scaleToFill" />
                  </view>
                  <text>VIP</text>
                </view>
              </view>
            </view>
            <!-- 单数 -->
            <view class="right-numwrap">
              <view class="li">
                <view class="txt"  :style="langR == 'zh'?'':'font-size:20rpx;'">{{$t('发布采购信息')}}</view>
                <view class="num">{{faQuotation.totalPurchase}}</view>
              </view>
              <view class="li">
                <view class="txt" :style="langR == 'zh'?'':'font-size:20rpx;'">{{ $t('成交单数') }}</view>
                <view class="num">{{faQuotation.totalDeal}}</view>
              </view>
              <view class="li">
                <view class="txt" :style="langR == 'zh'?'':'font-size:20rpx;'">{{ $t('成交率') }}</view>
                <view class="num">{{ ((faQuotation.dealRate || 0) * 100).toFixed(0) }}% </view>
              </view>
            </view>


          </view>
          <view class="card-infxox">
            <view class="reprot fz24">{{$t('已有')}}{{faQuotation.participateCount}}{{$t('人感兴趣并参与报价')}}</view>
            <view class="rank-price">
								<view class="txt fz24">{{$t('当前的报价排名')}}</view>
								<view class="r-line" >
									<view class="line"></view>
									<view class="rate fz24">{{$t('第')}}<text>{{faQuotation.ranking}}</text>{{$t('位')}}</view>
								</view>
							</view>
          </view>

          <!-- 采购信息 -->
          <view class="caigou-info">
            <view class="title">
              <view class="name">{{$t('采购信息')}}</view>
              <view class="status">{{ get(faQuotation, 'purchaseInfo.status') ==1? $t('已完成') : $t('进行中') }}</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('需求商品')}}</view>
              <view class="txtContent">{{ get(faQuotation, `purchaseInfo.${plangJava('productName')}`) }}</view>
            </view>
           <!-- <view class="list">
              <view class="txt">{{$t('期望品牌')}}</view>
              <view class="txtContent">{{ get(faQuotation, `purchaseInfo.${plangJava('productName')}`) }}</view>
            </view> -->
            <!-- <view class="list">
              <view class="txt">期望单价</view>
              <view class="txt">起重机</view>
            </view> -->
            <view class="list">
              <view class="txt">{{$t('目的地')}}</view>
              <view class="txtContent">{{ get(faQuotation, `purchaseInfo.${plangJava('destination')}`) }}</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('需求数量')}}</view>
              <view class="txtContent" v-if="langR == 'zh'">{{ get(faQuotation, 'purchaseInfo.amount') }}{{ get(faQuotation, 'purchaseInfo.unit') }}</view>
              <view class="txtContent" v-if="langR == 'ru'">{{ get(faQuotation, 'purchaseInfo.amount') }}{{ get(faQuotation, 'purchaseInfo.unitRu') }}</view>
            </view>
            <!-- <view class="list">
                <view class="txt">期望生产日期</view>
              <view class="txt">2025-1-10 至 2025-1-15</view>
            </view> -->
          </view>
          <!-- 参与信心 -->
          <view class="caigou-info">
            <view class="title">
              <view class="name">{{$t('参与信息')}}</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('商品名称')}}</view>
              <view class="txtContent">{{ get(faQuotation, `faQuotation.${plangJava('productName')}`) }}</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('商品品牌')}}</view>
              <view class="txtContent">{{ get(faQuotation, `faQuotation.${plangJava('productBrand')}`) }}</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('商品报价（总价）')}}</view>
              <view class="txtContent">{{get(faQuotation, 'faQuotation.currency')}}{{ get(faQuotation, 'faQuotation.price') }}</view>
            </view>
           <!-- <view class="list">
              <view class="txt">{{$t('商品')}}报价（单价）</view>
              <view class="txt">俄罗斯</view>
            </view> -->
            <view class="list">
              <view class="txt">{{$t('生产周期(天)')}}</view>
              <view class="txtContent">{{ get(faQuotation, 'faQuotation.productDuration') }}{{$t('天')}}</view>
            </view>
            <!-- <view class="list">
              <view class="txt">{{$t('发货时间')}}</view>
              <view class="txtContent">{{ get(faQuotation, 'faQuotation.productDuration') }}天</view>
            </view> -->
            <view class="list">
              <view class="txt">{{$t('发货地址')}}</view>
              <view class="txtContent">{{ get(faQuotation, `faQuotation.${plangJava('address')}`) }}</view>
            </view>
            <!-- 图片列表  -->
            <view class="w100p ">
              <view class="w100p shop_introduce">
                <view class="title">{{$t('商品简介')}}</view>
                <view class="jianjie" style="overflow-y: scroll;">
					{{ get(faQuotation, `faQuotation.${plangJava('description')}`) }}
                  <!-- <u-parse :html="$t('这个是商品介绍介绍这个是商品介绍介绍这个是商品介绍介绍')"></u-parse> -->
                </view>
              </view>
          

            </view>
            <!-- 商品其他文件 -->
            <view class="file-wrap">
              <view class="w100p big_title">
                {{$t('商品图片')}}
              </view>
              <scroll-view v-if="get(faQuotation, 'faQuotation.productImgUrls')" scroll-x class="scrolxxx-wwww">
                <view class="w100p scrolxxx">
                  <image class="goback_img" :src="item" mode="aspectFill" @click="amplifyImg(item)"
                    v-for="(item, index) in get(faQuotation, 'faQuotation.productImgUrls').split(',')" :key="index"></image>
                </view>
              </scroll-view>
			  <view v-else class="">
			  	<p class="fz26 text-888 pb-25" style="text-align: center;">{{$t("暂无信息")}}</p>
			  </view>
            </view>
            <view class="file-wrap">
              <view class="w100p big_title">
                {{$t('商品视频')}}
              </view>
              <scroll-view v-if="get(faQuotation, 'faQuotation.productVideoUrls')" scroll-x class="scrolxxx-wwww">
                <view class="pr video_wrap">
                  <video id="myVideo1" class="w100p  palyxxx" :src="get(faQuotation, 'faQuotation.productVideoUrls').split(',')[0]" :show-center-play-btn="true"
                    object-fit="cover" play-btn-position="center" :controls="true" :autoplay="isAdroid ? true : false" muted
                    :poster="currntMainPic">
                  </video>
                  <!-- <view class="video-wrapxx">
                    <image :src="currntMainPic" mode="aspectFill"></image>
                  </view> -->
                  <view class="video-wrapxx">
                    <image :src="get(faQuotation, 'faQuotation.productImgUrls').split(',')[0]" mode="aspectFill"></image>
                  </view> 
                  <cover-view v-show="isShow" class="pa play_wrap" @click="playsHeader((get(faQuotation, 'faQuotation.productVideoUrls').split(',')[0])),'two_video'">
                    <view class="icon_wrap">
                      <u-icon name="play-right-fill" color="#fff" size="46"></u-icon>
                    </view>
                  </cover-view>
                </view>
				<!-- <view class="w100p scrolxxx">
                  <image class="goback_img" :src="item" mode="aspectFill" @click="playsHeader(item)"
                    v-for="(item, index) in get(faQuotation, 'faQuotation.productVideoUrls').split(',')" :key="index"></image>
                </view> -->
              </scroll-view>
			  <view v-else class="">
				<p class="fz26 text-888 pb-25" style="text-align: center;">{{$t("暂无信息")}}</p>
			  </view>
            </view>
            <view class="file-wrap">
              <view class="w100p big_title">
                {{$t('商品相关文件')}}
              </view>
              <scroll-view scroll-x class="scrolxxx-wwww">
                <view v-if="get(faQuotation, 'faQuotation.productOtherFileUrls')" class="w100p scrolxxx">
                  <image v-for="(item, index) in get(faQuotation, 'faQuotation.productOtherFileUrls').split(',')" class="goback_img" :src="getImageUrl(item)" mode="aspectFill" @click="amplifyImg(item)"
                    :key="index"></image>
                </view>
              </scroll-view>
            </view>
          </view>

          <view style="height: 16rpx;"></view>





        </view>
      </scroll-view>
    </view>


    <!-- 底部导航栏 -->
    <view v-if="faQuotation.purchaseInfo && faQuotation.purchaseInfo.status == 0" class="footer-nav">
      <view class="footer-wrapper">
        <view class="btn lvse" @click="callPhone">{{$t('拨打视频通话')}}<image
								src="/static/translatexx.png"
								class="translatexxxxxx"
								mode="widthFix"
							/></view>
        <view class="btn blue" @click="onChangePrice">
          <view class="price">
            {{ get(faQuotation, 'faQuotation.currency') }}<text class="ml-10">{{ get(faQuotation, 'faQuotation.price') }}</text>
          </view>
          <view class="change" >{{ $t('修改报价') }}</view>
        </view>
      </view>
    </view>
    <view v-else class="footer-nav">
      <view class="footer-wrapper">
        <view class="btnAll" @click="callPhone">{{$t('拨打视频通话')}}<image
								src="/static/translatexx.png"
								class="translatexxxxxx"
								mode="widthFix"
							/></view>
      </view>
    </view>


    <!-- 播放视频 -->
    <uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
      <view class="wrapper-video">
        <video id="mainVideo" :src="playVideo" :show-center-play-btn="true" object-fit="cover"
          play-btn-position="center" :controls="true" :autoplay="true" class="video-main" :show-fullscreen-btn="false">
        </video>
      </view>
    </uni-popup>

    <!-- 图片放大 -->
    <uni-popup ref="popup" class="common_pop" mask-background-color="rgba(0,0,0,1)">
      <view class="w100p">
        <image class="w100p" :src="commonImg" mode="widthFix" @click="closePop"></image>
      </view>
    </uni-popup>

  </view>
</template>

<script>
import {
  mapState
} from 'vuex';
import {
  IMAGE_URL,
} from "@/config/app"

import CommonHeader from "@/pages/components/common-header.vue";
import {faQuotationGet} from "@/api/caigou.js"
import { request_minute } from '@/api/basic'
export default {
  data() {
    return {
      statusBarHeight: uni.getStorageSync("statusBarHeight"),
      videos: null, // 播放ref
      
      playVideo: '',
      commonImg: '',
      currntMainPic: '',
      currentVideo: '',
      isShow: true,
      historyList: [], //浏览记录列表
      list: [],
      product: {},
      purchaseInfo:{},
      faQuotation:{},
      purchaseInfoId:'',
      IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			isAdroid: false,

    }
  },
  components: {
    CommonHeader,
  },
  methods: {
    goPerson() {
			if (this.faQuotation.identityType == 0) {
				uni.navigateTo({
					url: `/pages/details/merchantDetail?bid=${this.faQuotation.shopId}`,
					webview: 'zWebViewShop'
				})
			} else {
				uni.navigateTo({
					url: `/pages/myPersonPage/index?targetUserId=${this.faQuotation.purchaseInfo.publishUserId}`,
					webview: 'zWebView'
				})
			}
		},
       // 获取图片第一张
   stringToArray(str) {
            if (typeof str !== 'string') return []; // 非字符串返回空数组
            return str.includes(',') ? str.split(',') : [str];
          },
	//查询某个采购寻单的参与报价信息
	getFaQuotationGet(data){
		faQuotationGet(data).then((res)=>{
			if(res.code==0){
				this.faQuotation=res.data
        this.currentVideo = res.data.purchaseInfo.productVideoUrls || ''
				// this.currntMainPic = thisstringToArray(res.data.purchaseInfo.productImgUrls)[0]
        console.log(this.faQuotation,'999999999999999999999')
				
			}
		})
	},
	callPhone() {
		// console.log('999999', uni.getStorageSync("user_id"), this.faQuotation.purchaseInfo.publishUserId)
		// return
		if(uni.getStorageSync("user_id") == this.faQuotation.purchaseInfo.publishUserId) {
			uni.showToast({
				title: this.$t('不能给自己打电话'),
				icon: "none",
			});
		} else {
			request_minute({
				user_id: uni.getStorageSync("user_id"),
				target_id: this.faQuotation.purchaseInfo.publishUserId,
			}).then(res => {
				if (res.data.data.flag == 1) {
					this.isMessageGo({
						action: 'call',
						data: {
							userId: this.faQuotation.purchaseInfo.publishUserId,
							type: res.data.data.type || 1,
						}
					})
				} else {
					uni.showToast({
						title: this.$t('积分不足，请充值积分'),
						icon: "none",
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/vip/scorePoint',
							webview: 'zWebView'
						})
					}, 500)
				}
			})
		}
	},
    onChangePrice() {
		console.log('09999', this.faQuotation)
		// return
		  uni.navigateTo({
			url:`/pages/caigou/canyuOrder/index?id=${this.faQuotation.purchaseInfo.id}&qutationId=${this.faQuotation.faQuotation.id}`,
		  })
    },
    // 参与报价
    onParticipate() {
      uni.navigateTo({
        url: '/pages/caigou/canyuOrder/index',
      })
    },
    getTopR() {
      return `calc(${+this.statusBarHeight}px + 44px + 400rpx)`
    },
    // 播放头部视频
    playsHeader(video,e) {
		console.log('video--', video,e)
      // 判断安卓
      const systemInfo = uni.getSystemInfoSync();
      // 判断是否为 Android 系统
      if (systemInfo.platform === 'android') {
        this.playVideo = video;
        this.$refs.popupVideo.open()
        return;
      }
      this.$nextTick(() => {
        if(e == 'first_video'){
          this.videos.play();
          this.videos.requestFullScreen();
        }else{
          this.jjvideos.play();
          this.jjvideos.requestFullScreen();
        }
     
      })
    },
    // 关闭图片弹窗
    closePop() {
      this.$refs.popup.close();
    },
    // 图片放大
    amplifyImg(imgUrl) {
      if (!imgUrl) return;
      this.commonImg = imgUrl;
      this.$refs.popup.open();
    },
    // 获取数据
    async getData() {
      const { data } = await this.$u.api.shopping.getProduct({
        id: 338,
      });
      this.currntMainPic = data.product.pic;
      this.list = [data.product.pic, data.product.pic, data.product.pic];
      this.currentVideo = data.product.video;
      
      this.product = data.product;
    },
    // 浏览记录列表
    async getHistoryData() {
      try {
        const {
          data
        } = await this.$u.api.shopping.getMemberHistory({
          id: 338,
          type: "shop",
        });
        this.historyNum = data.member_history_count || 0;
        if (!!data.member_history?.length) {
          let arr = [];
          data.member_history.map((item, index) => {
            let str = item[this.plang('username')] + this.$t("正在查看");
            arr.push(str)
          })
          this.historyList = [...arr];
        }
      } catch (e) {

      }
    },
  },
  // created() {
	// 	// 刷新页面
	// 	window.onNativeShow = this.getFaQuotationGet
	// },
  onLoad(options) {
    this.videos = uni.createVideoContext('myVideo');
    this.jjvideos = uni.createVideoContext('myVideo1');
    // this.getData();
    // this.getHistoryData();
    this.purchaseInfoId = options.id
	  this.getFaQuotationGet({'purchaseInfoId':options.id,'quotationUserId':uni.getStorageSync('user_id')})
    window.onNativeShow =()=>{
      this.getFaQuotationGet({
        'purchaseInfoId': this.purchaseInfoId,'quotationUserId':uni.getStorageSync('user_id')
      })
     
    } 

    const systemInfo = uni.getSystemInfoSync();
    this.isAdroid = systemInfo.platform === 'android';
  },
}
</script>

<style scoped lang="scss">
@import './index.scss';
	@import '@/assets/appScss.scss';
  .r_base-info{
	flex-direction: column;
  align-items: flex-start;
	.right-numwrap{
		margin-top: 20rpx;
		margin-right: 10rpx;
		.li{
			.txt{
				white-space: nowrap !important;
			}
		}
	}
}
</style>